<template>
  <div>
    <!-- 卡片  shadow 设置阴影 -->
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
      <!-- 
        type 设置主题颜色  size 设置按钮大小  icon 添加按钮图标 
        v-authority 自己定义的全局自定义指令
      -->
      <el-button
        type="primary"
        size="default"
        :icon="Plus"
        @click="addTrademark"
        v-authority="'btn.Trademark.add'"
        >添加</el-button
      >
      <!-- card body -->
      <!-- 表格 -->
      <el-table
        border
        style="margin: 20px 0"
        :data="tmObj.records"
        v-loading="loading"
      >
        <!-- 表格列  label 设置表头标题 width 设置列宽 -->
        <el-table-column
          label="序号"
          :width="80"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO">
          <template #="{ row, $index }">
            <a :title="row.tmName">
              <img
                :src="row.logoUrl"
                alt=""
                style="width: 80px; height: 60px"
              />
            </a>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <!-- 修改按钮 -->
            <el-button
              type="warning"
              size="small"
              :icon="Edit"
              @click="updateTrademark(row)"
            ></el-button>
            <!-- 删除按钮 -->
             <el-popconfirm
            :title="`你确定删除${row.tmName}?`"
            width="250px"
            :icon="Delete"
            @confirm="handler(row)"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete"></el-button>
            </template>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- 
        v-model:current-page 当前所在页码
        v-model:page-size   一页展示几条数据
        :page-sizes  下拉框中可选一页展示几条数据的数据
        :total  总数据条数
        :pager-count  可见页码总数
        layout  各子组件的排序方式
       -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7]"
        :total="tmObj.total"
        :pager-count="7"
        background
        layout=" prev, pager, next, jumper,->, sizes,total"
        @current-change="getTrademarkList"
        @size-change="sizeChangeHandler"
      >
      </el-pagination>

      <!-- 对话框 -->
      <el-dialog v-model="dialogFormVisible" :title="tmParams.id?'修改品牌':'添加品牌'">
        <!-- 
          进行表单验证的第一步:绑定model属性  
          第二步:绑定rules属性 
          第三步:在需要验证的表单项上添加prop属性,属性值为验证名
        -->
        <el-form
          style="width: 80%"
          label-width="90px"
          :model="tmParams"
          :rules="rules"
          ref="FormRef"
        >
          <!-- 获取品牌名称数据 -->
          <el-form-item label="品牌名称" prop="tmName">
            <el-input autocomplete="off" v-model="tmParams.tmName" />
          </el-form-item>
          <!-- 获取品牌LOGO数据 -->
          <el-form-item label="品牌LOGO" prop="logoUrl">
            <el-upload
              class="avatar-uploader"
              action="/api/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="tmParams.logoUrl"
                :src="tmParams.logoUrl"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addOrUpdateTm()">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入icon图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  //加号
  Plus,
} from "@element-plus/icons-vue";
// 引入响应式API
import { ref, onMounted, reactive } from "vue";
// 引入获取品牌数据接口
import {
  reqAddOrUpdateTrademark,
  reqDeleteTrademark,
  reqTrademarkList,
} from "@/api/product/trademark/trademark";
// 引入品牌接口返回的数据类型
import type {
  trademark,
  trademarkResponseData,
} from "@/api/product/trademark/model/trademark";

// 定义响应式数据
let currentPage = ref<number>(1);
let pageSize = ref<number>(3);
let loading = ref<boolean>(false);
// 定义对话框表单隐藏还是可见的响应式数据(一定要分清到底是表单还是表格)!!!
let dialogFormVisible = ref<boolean>(false);
// 获取表单DOM
let FormRef = ref<FormInstance>();
// 定义添加品牌数据时给服务器携带的参数
let tmParams = reactive<trademark>({
  tmName: "",
  logoUrl: "",
});

// 定义响应式数据
let tmObj = reactive<trademarkResponseData>({
  total: 0,
  records: [],
});

// 组件挂载的时候发请求获取品牌数据
onMounted(() => {
  getTrademarkList();
});
// 获取品牌数据的回调
const getTrademarkList = async (page: number = 1) => {
  // 发请求的时候加载
  loading.value = true;
  // 整理参数
  currentPage.value = page;
  // 再次发送请求
  let result = await reqTrademarkList(currentPage.value, pageSize.value);
  //  console.log(result);
  tmObj.total = result.total;
  tmObj.records = result.records;
  //   请求结束停止加载
  loading.value = false;
};
// 一页展示几条数据的回调
const sizeChangeHandler = (limit: number) => {
  // 整理参数
  pageSize.value = limit;
  // 再次发送请求
  getTrademarkList();
};
// 引入所需组件
import type { UploadProps, FormInstance, FormRules } from "element-plus";
// 定义文件上传成功时的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  tmParams.logoUrl = response.data;
};

// 引入所需组件(消息弹出框)
import { ElMessage } from "element-plus";
// 定义上传文件之前的钩子
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (
    rawFile.type == "image/jpeg" ||
    rawFile.type == "image/png" ||
    rawFile.type == "image/gif"
  ) {
    if (rawFile.size / 1024 / 1024 <= 5) {
      return true;
    }
  } else {
    return false;
  }
};

// 点击确认时发送请求并将添加的品牌数据传给服务器
const addOrUpdateTm = async () => {
  // 点击确认触发form表单上的 validate方法
  FormRef.value?.validate(async (success) => {
    // 如果表单验证成功
    if (success) {
      await reqAddOrUpdateTrademark(tmParams);
      // 关闭对话框
      dialogFormVisible.value = false;
      // 通过id判断是留在当前页还是回到第一页
      getTrademarkList(tmParams.id ? currentPage.value : 1);
      // 弹出成功提示框
      ElMessage({
        message: tmParams.id?'修改成功':'添加成功',
        type: "success",
      });
    } else {
      ElMessage({
        message: tmParams.id?'修改失败':'添加失败',
        type: "error",
      });
    }
  });
};

// 点击添加按钮清空对话框中之前的内容
const addTrademark = () => {
  // 显示对话框
  dialogFormVisible.value = true;
  // 清空里面的信息
  tmParams.tmName = "";
  tmParams.logoUrl = "";
  // 还要清空id,否则点击修改后再点击添加时会出错
  tmParams.id = "";
  // 清空之前的验证提示信息
  // (可将其设置为可选,解决获取不到最新DOM的问题=>该问题是:当响应式数据发生变化时,页面会重新渲染,如果不做任何处理,则拿不到更新后的DOM)
  // 解决方案:1.将其设置为可选
  //         2.使用 nextTick将其包起来,即 nextTick(()=>{FormRef.value?.resetFields()})
  //         3.也可使用一个定时器将其包起来,但该方法不靠谱,因为无法确认渲染时间
  FormRef.value?.resetFields()
};

// 点击修改按钮修改数据
const updateTrademark = (row: trademark) => {
  // 显示对话框
  dialogFormVisible.value = true;
  // 注:resetFields这个方法的作用:重置该表单项，将其值重置为初始值，并移除校验结果
  // 因为它会将值重置为初始值,即之后点击任何一个修改按钮,其中的内容都会重置为第一次点击的值
  // 解决方案:调整代码顺序,即重置之后再获取该修改按钮的值即可
  FormRef.value?.resetFields()
  // 获取点击对象的名称和图片,并且需要id
  tmParams.id = row.id;
  tmParams.tmName = row.tmName;
  tmParams.logoUrl = row.logoUrl;
};

// 表单验证规则
const rules = reactive<FormRules>({
  tmName: [
    // required 必须验证  message 提示错误信息  trigger 触发的时机
    // min 字段
    { required: true, message: "品牌名称不能为空", trigger: "blur" },
    { required: true, min: 2, max: 10, trigger: "change" },
  ],
  logoUrl: [{ required: true, message: "请上传文件" }],
});

// 删除按钮的回调=>删除品牌
const handler = async (row: trademark) => {
  let result =await reqDeleteTrademark(row.id);
  console.log(result);
  
  // try {
  //   //删除品牌成功
  //   // await reqDeleteTrademark(row.id);
    
  //   //提示信息
  //   ElMessage({
  //     type: "success",
  //     message: `删除${row.tmName}成功`,
  //   });
  //   //再次获取最新数据
  //   getTrademarkList(currentPage.value);
  // } catch (error) {}
};
</script>

<!--记得拿到样式(头像上传)-->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>